<script setup>
import { ref,onMounted } from 'vue'
import {getOrderSetting,updateOrderSetting} from '@/api/orderSetting';
import {ElMessage, ElMessageBox} from "element-plus";
const orderSettingForm =ref(null)
const orderSetting = ref({
  id: null,
  flashOrderOvertime: 0,
  normalOrderOvertime: 0,
  confirmOvertime: 0,
  finishOvertime: 0,
  commentOvertime: 0
})
const checkTime =(rule, value, callback) => {
  if (!value) {
    callback(new Error('时间不能为空！'))
  }
  let intValue = parseInt(value);
  if(!Number.isInteger(intValue)) {
    callback(new Error('请输入数字值'))
  }
  callback()
}
const rules = {
  flashOrderOvertime: [{ validator: checkTime, trigger: 'blur' }],
  normalOrderOvertime: [{ validator: checkTime, trigger: 'blur' }],
  confirmOvertime: [{ validator: checkTime, trigger: 'blur' }],
  finishOvertime: [{ validator: checkTime, trigger: 'blur' }],
  commentOvertime: [{ validator: checkTime, trigger: 'blur' }]
}

onMounted(() => {
  getSettingDetail()
})
const getSettingDetail = async () => {
  const res = await getOrderSetting(1)
  orderSetting.value = res.data.data
}

// 提交表单
const confirm = async (formName) => {
  orderSettingForm.value.validate((valid) => {
    if (valid) {
      ElMessageBox.confirm('确认提交吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        updateOrderSetting(1,orderSetting.value).then(() => {
          ElMessage.success('提交成功')
        }).catch(() => {
          ElMessage.error('提交失败')
        })
      }).catch(() => {
        console.log('取消操作')
      })
    }
  })
}

</script>

<template>
  <div class="order-setting">
   <el-card style="width: 800px;padding: 20px;">
     <el-form :model="orderSetting" :rules="rules" ref="orderSettingForm" label-width="150px">
       <el-form-item label="秒杀订单超过：" prop="flashOrderOvertime">
         <el-input v-model="orderSetting.flashOrderOvertime" class="input-width">
           <template #append>分</template>
         </el-input>
         <span class="note-margin">未付款，订单自动关闭</span>
       </el-form-item>
       <el-form-item label="正常订单超过：" prop="normalOrderOvertime">
         <el-input v-model="orderSetting.normalOrderOvertime" class="input-width">
           <template #append>分</template>
         </el-input>
         <span class="note-margin">未付款，订单自动关闭</span>
       </el-form-item>
       <el-form-item label="发货超过：" prop="confirmOvertime">
         <el-input v-model="orderSetting.confirmOvertime" class="input-width">
           <template #append>天</template>
         </el-input>
         <span class="note-margin">未收货，订单自动完成</span>
       </el-form-item>
       <el-form-item label="订单完成超过：" prop="finishOvertime">
         <el-input v-model="orderSetting.finishOvertime" class="input-width">
           <template #append>天</template>
         </el-input>
         <span class="note-margin">自动结束交易，不能申请售后</span>
       </el-form-item>
       <el-form-item label="订单完成超过：" prop="commentOvertime">
         <el-input v-model="orderSetting.commentOvertime" class="input-width">
           <template #append>天</template>
         </el-input>
         <span class="note-margin">自动五星好评</span>
       </el-form-item>
       <el-form-item>
         <el-button
             @click="confirm('orderSettingForm')"
             type="primary">提交</el-button>
       </el-form-item>
     </el-form>
   </el-card>
  </div>
</template>

<style scoped lang="scss">
.order-setting {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;

  .input-width {
    width: 50%;
  }

  .note-margin {
    margin-left: 15px;
    font-size: 12px;
  }
}

</style>